<!DOCTYPE html>
<html>
<head>
    <title>Coaxial Cable Diagram</title>
</head>
<body>
<canvas id="canvas" width="650" height="500"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';

    // Parameters
    const cx = 180;
    const cy = 220;
    const r1 = 40;
    const r2 = 80;
    const r3 = 110;
    const length = 350;

    // Helper function to draw an arrow from a point to another
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 12; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);

        // Draw the line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    // Draw the main cylinder body
    ctx.beginPath();
    ctx.moveTo(cx, cy - r3);
    ctx.lineTo(cx + length, cy - r3);
    ctx.moveTo(cx, cy + r3);
    ctx.lineTo(cx + length, cy + r3);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(cx + length, cy, r3, -Math.PI / 2, Math.PI / 2);
    ctx.stroke();

    // Draw the concentric circles at the front
    ctx.beginPath();
    ctx.arc(cx, cy, r1, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(cx, cy, r2, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(cx, cy, r3, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the internal cutaway shape, interpreting it as two horizontal lines
    // tangent to the inner circle (r1) and ending on the middle circle (r2).
    const y_cut = r1;
    const x_cut_start = cx;
    const x_cut_end = cx + Math.sqrt(r2 * r2 - y_cut * y_cut);

    ctx.beginPath();
    // Top horizontal line
    ctx.moveTo(x_cut_start, cy - y_cut);
    ctx.lineTo(x_cut_end, cy - y_cut);
    // Bottom horizontal line
    ctx.moveTo(x_cut_start, cy + y_cut);
    ctx.lineTo(x_cut_end, cy + y_cut);
    // Vertical connecting line
    ctx.moveTo(x_cut_end, cy - y_cut);
    ctx.lineTo(x_cut_end, cy + y_cut);
    ctx.stroke();


    // Draw radius lines and arrows
    // R1
    const r1_angle = 135 * Math.PI / 180;
    drawArrow(cx, cy, cx + r1 * Math.cos(r1_angle), cy + r1 * Math.sin(r1_angle));

    // R2 - points to the top-right corner of the cutaway shape
    drawArrow(cx, cy, x_cut_end, cy - y_cut);

    // R3
    drawArrow(cx, cy, cx, cy + r3);

    // Helper function to draw labels with subscripts
    function drawLabel(char, sub, x, y) {
        ctx.font = 'italic 22px "Times New Roman"';
        const charWidth = ctx.measureText(char).width;
        ctx.fillText(char, x, y);

        ctx.font = '15px "Times New Roman"';
        ctx.fillText(sub, x + charWidth / 2 + 2, y + 5);
    }
    
    // Draw labels
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";

    // Label R1
    drawLabel("R", "1", cx - 55, cy - 20);

    // Label R2
    drawLabel("R", "2", cx + 30, cy - 100);

    // Label R3
    drawLabel("R", "3", cx, cy + r3 + 20);

    // Draw "题 7 图" (Problem 7 Figure)
    ctx.font = '22px "SimSun"';
    ctx.fillText("题 7 图", cx + 120, cy + r3 + 80);

</script>
</body>
</html>